<template>
  <!-- 增加静音属性：muted -->
  <video
      id="myVideo"
      controls
      style="width:100%;height: 100%;object-fit: fill;"
      ref="flvPlayerRef"
  ></video>
</template>

<script setup lang="ts">
/* eslint-disable */
import {ref, onMounted, onUnmounted} from 'vue';
import flvjs from 'flv.js/dist/flv.min.js'; // 代替  import flvjs from 'flv.js'; 否则504

const props = defineProps<{
  videoSrc: string;
  duration: number
}>();

const flvPlayer = ref<any>(''); // 要声明一个播放器的容器  flvPlayer
const flvPlayerRef = ref()
onMounted(() => {
  //在mounted声明周期里调用 如果出现DOM没加载出来的原因 可以使用定时器
  videoPlayer();
});

const decodedFrames=ref(0);

const videoPlayer = () => {
  // flvjs.isSupported() 判断当前浏览器是否支持flv。
  if (flvjs.isSupported()) {
    if(flvPlayer.value) {
      destoryPlayer()
    }
    var videoElement:any = document.getElementById('myVideo');
    flvPlayer.value = flvjs.createPlayer(
        // 创建直播流，加载到DOM中去
        {
          type: 'flv', // 媒体类型 flv 或 mp4，默认 flv
          // isLive: true, // 是否是直播流
          hasAudio: false, // 是否有音频
          hasVideo: true,
          // enableStashBuffer: true,
          url: props.videoSrc,
          duration: props.duration ? props.duration : undefined
        },
        // {
        //   cors: true, // 是否跨域
        //   enableWorker: false, // 是否多线程工作
        //   enableStashBuffer: false, // 是否启用缓存 关闭IO隐藏缓冲区
        //   stashInitialSize: 128, // 缓存大小(kb)  默认384kb
        //   autoCleanupSourceBuffer: true, // 是否自动清理缓存
        //   lazyLoad: false
        // }
    );

    flvPlayer.value.attachMediaElement(videoElement); // 挂载video标签。
    flvPlayer.value.load(); //加载流
    // flvPlayer.value.play();
    flvPlayer.value.on(flvjs.Events.STATISTICS_INFO, (res:any)=>{
      console.log(res.decodedFrames,decodedFrames.value);
      if(decodedFrames.value != res.decodedFrames){
        decodedFrames.value = res.decodedFrames;
        console.log( res.decodedFrames);
        return;
      }else if(!!decodedFrames.value){
        flvPlayer.value.detachMediaElement();
        // flvPlayer.value.pause();
        // flvPlayer.value.play()
      }
      // console.log(flvPlayer.value.currentTime);
    })

    // !!!!!!这里需要注意，有的时候load加载完成不一定可以播放，要是播放不成功，用settimeout 给下面的this.player.play() 延时几百毫秒再播放
    setTimeout(() => {
      flvPlayer.value.play(); //播放流
    }, 3000);
  }
};



const destoryPlayer = () => {
  if (flvPlayer.value) {
    flvPlayer.value.pause();
    flvPlayer.value.unload();
    flvPlayer.value.detachMediaElement();
    flvPlayer.value.destroy();
    flvPlayer.value = null;
  }
}
// 在销毁的声明周期中  必须要销毁掉播放器的容器！！！！不然会占用TCP个数，导致其他页面的监控也播放不了
onUnmounted(() => {
  destoryPlayer()
});

defineExpose({
  videoPlayer
});
</script>

<style lang="scss" scoped>
video {
  height: 100%;
  width: 100%;
}
</style>


